
<?php
//include_once 'header.php';
?>
<script>
    $('document').ready(function(){
        getAllNurses();
    });
    
    function sendRequest(u){
        // Send request to server
        //u a url as a string
        //async is type of request
                                
        var obj=$.ajax({url:u,async:false});

        //Convert the JSON string to object
        var result=$.parseJSON(obj.responseText);
        return result;	//return object
    }
    
    function liveSearch(str) {

      if(str.length == 0){
            $("#livesearch").text("");
            return;
      }
      var obj = sendRequest("nurseFunctions.php?cmd=1&st="+str);
        if(obj.result == 1){
            displayNurses(obj);
        }else if(obj.result == 0){
            $('#livesearch').text(obj.result);
        }
    }

    function displayNurses(obj){
        var i = 0;
        var table = '<div id="divContent">';
        table += '<table id="tableExample" class="reportTable"><tbody>';
        table += "<tr class='header'><th>First Name</th><th>Surname </th>";
        table += "<th>Gender </th><th>Department </th><th> </th></tr>";
        
        for(; i < obj.nurses.length; i++){
            table += '<tr class="row1">';  
    
            table += '<td>'+ obj.nurses[i].nurse_fname +'</td>';
            table += '<td>'+ obj.nurses[i].nurse_sname +'</td>';
            table += '<td>'+ obj.nurses[i].gender +'</td>';
            table += '<td>'+ obj.nurses[i].department_name +'</td>';
            table += '<td class="modify">';
            table += '<span class="ti-pencil" onclick=update('+ obj.nurses[i].nurse_id +')></span>';                        
            table += '<span class="ti-trash"  onclick=deleteNurse('+ obj.nurses[i].nurse_id +',this)></span></td></tr>';                       
        }          
        table += "</tbody></table>";        
        $('#livesearch').html(table);
        $('#livesearch').show();
    }
    
    function getNurseAdd(){
            
            $("#content_area").slideDown(function (){
                $("#content_area").load('nursesadd.php');
            });
    }
    
    function getAllNurses() {
        
        var obj = sendRequest("nurseFunctions.php?cmd=3");
        if(obj.result == 1){
            displayNurses(obj);
        }
    }
    
    function deleteNurse(id,span){

        var obj = sendRequest("nurseFunctions.php?cmd=5&id="+id);
        if(obj.result == 1){
            showStatus( obj);
            deleteRow(span);
        }else{
           showStatus(obj); 
        }
    }
    
    function update(id){
        $("#content_area").slideDown();
       
        $("#content_area").load('nursesupdate.php?id='+id); 
    }

    function hideStatus(){
        $('#status').slideUp();
    }
    
    
</script>

<div class="container">
    <h1>Nurses</h1>
    <div id="dash">
        <span class=ti-plus onclick="getNurseAdd()"></span>
        <span class=ti-pencil onclick="getAllNurses()"></span>
        <span class=ti-trash onclick="getAllNurses()"></span>
        
        <div id="search">
            <input type="text" type="text" name="st" size="40" max-size="60" 
                   onkeyup="liveSearch(this.value)">
            <span class="ti-search"></span>
        </div>
    </div>
    
    

<div id="status_content">
    <h2>status message 
        <span class="ti-arrow-circle-down" onclick="toggleStatus()">

        </span></h2>
    <div id="status"></div>                                        
</div>
    
<div id="divContent">
    <h2><span class="ti-angle-down" onclick="hideForm(0)"></span></h2>
    <div id="viewArea">
        <div id="content_area"></div>
    </div>

    <div id="displayArea">
        <div id="livesearch"></div>
    </div>
    </div>
    
</div>
    

                            


